<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base target="${cxt } /">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册页面</title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/dz/register.css" />
<script type="text/javascript">
	var sub = true;//定义一个标志用来判断是否提交表单
	var subb= false;
	$(function() {

		$(".register_i7").click(function() {
			clos(this);
		});
		//////////////////////
		$(".register_btn").click(function() {
			subb= true;
			yanzhen();

		});
		//////////////////////
		$("input").change(function() {
			chan(this);
		});
		////////////////////////
		$("#yzm").click(function() {
			ajx();
		});
		$("input").focus(function(){
			yan(this)
		});
		//////////////////////////
		$("[name=re_yzm]").change(function() {
			var str = $("[name=re_yzm]").val();
			$.ajax({
				type : "post",
				url : "yzm",
				success : function(data) {
					if (str != data) {
						$("[name=re_hid3]").css("z-index", "10");
						ajx();
						sub = false;
					} else {
						sub = true;
					}
				}
			});
		});
		/////////////////////////
	
		/////////////////////////
	});

	function clos(e) {
		$(e).parent().css("z-index", "-1");

	}

	function yanzhen() {
		var rename = $("[name=re_name]").val();
		var rephon = $("[name=re_phon]").val();
		var reyzm = $("[name=re_yzm]").val();
		var repw = $("[name=re_pw]").val();
		if (rename == "" || rename == null) {
			$("[name=re_hid1]").css("z-index", "10");
			return;
		}
		if (rephon == "" || rephon == null || rephon.length != 11) {
			$("[name=re_hid2]").css("z-index", "10");
			return;
		}
		if (reyzm == "" || reyzm == null) {
			$("[name=re_hid3]").css("z-index", "10");
			return;
		}
		if (repw == "" || repw == null || repw.length<6||repw.length>18) {
			$("[name=re_hid4]").css("z-index", "10");
			return;
		}
		if (sub == true &&subb==true) {
			$("#regist_form").submit();
		}

	}
	function chan(e) {
		if (e.name == "re_name") {
			$("[name=re_hid1]").css("z-index", "-1");
		}
		if (e.name == "re_phon") {
			$("[name=re_hid2]").css("z-index", "-1");
		}
		if (e.name == "re_yzm") {
			$("[name=re_hid3]").css("z-index", "-1");
		}
		if (e.name == "re_pw") {
			$("[name=re_hid4]").css("z-index", "-1");
		}
	}
	
	function yan(e){
		var rename = $("[name=re_name]").val();
		var rephon = $("[name=re_phon]").val();
		var reyzm = $("[name=re_yzm]").val();
		var repw = $("[name=re_pw]").val();
		if(e.name=="re_phon"){
				if(rename == "" || rename == null) {
				$("[name=re_hid1]").css("z-index", "10");
				return;
				}
		}
		if(e.name=="re_yzm"){
			if(rephon == "" || rephon == null || rephon.length != 11) {
			$("[name=re_hid2]").css("z-index", "10");
			return;
			}
		}
		if(e.name=="re_yhm"){
				if(repw == "" || repw == null || repw.length < 6 || repw.length > 18) {
			$("[name=re_hid4]").css("z-index", "10");
			return;
				}
		}
	}
	
	function ajx() {
		$.ajax({
			type : "get",
			url : "yzm",
			success : function(data) {
				$("#yzm").text(data);
			}
		});
	}
</script>
</head>
<body>
<body>
	<div class="register_body">
		<div class="register_body_left">
			<div class="float_left">
				<p class="tatle">注册新用户</p>
				<form method="post" id="regist_form" action="register">
					<ul>
						<li class="relative"><span class="start">*</span> <label><i
								class="register_i1"></i></label> <input name="re_name" value=""
							class="register_name" type="text" placeholder="请输入您的真实姓名" /></li>
						<li class="relative"><span class="start">*</span> <label><i
								class="register_i2"></i></label> <input name="re_phon" value=""
							class="register_phon" type="text" placeholder="请输入手机号" /></li>
						<li class="relative"><span class="start">*</span> <label>
								<i class="register_i3"></i>
						</label> <input name="re_yzm" value="" class="register_yzm" type="text"
							placeholder="请输入手机动态码" />
							<div  id="yzm"  class="register_lb_yzm">获取手机动态码</div></li>
						<li class="relative"><span class="start">*</span> <label><i
								class="register_i4"></i></label> <input name="re_pw" value=""
							class="register_pw" type="password"
							placeholder="建议6—18位数字、字母、字符组合" /></li>
						<li class="relative"><span class="start_no">*</span> <label><i
								class="register_i5"></i></label> <input name="re_yhm" value=""
							class="register_yhm" type="text" placeholder="如有优惠码，请填写优惠码" /></li>
					</ul>
					<p class="register_p">
						<input name="re_check" class="register_check" type="checkbox"
							checked="checked" /> <span>我已阅读并同意</span> <a href="#">《神州租车会员服务条款》</a>
					</p>
				</form>
				<div class="register_btn">注册</div>
			</div>
			<div class="register_hidden float_left">
				<div name="re_hid1" class="register_hid">
					<span class="arrow"></span> <i class="register_i6"></i><span
						class="register_span">请填写用户名</span><i class="register_i7"></i>
				</div>
				<div name="re_hid2" class="register_hid">
					<span class="arrow"></span> <i class="register_i6"></i><span
						class="register_span">手机格式不正确</span><i class="register_i7"></i>
				</div>
				<div name="re_hid3" class="register_hid">
					<span class="arrow"></span> <i class="register_i6"></i><span
						class="register_span">验证码错误</span><i class="register_i7"></i>
				</div>
				<div name="re_hid4" class="register_hid">
					<span class="arrow"></span> <i class="register_i6"></i><span
						class="register_span">建议6-18位数字、字母、符号的组合</span><i
						class="register_i7"></i>
				</div>
			</div>
		</div>
		<div class="register_body_right">
			<div>
				<p class="register_p">
					<span>已有帐号？</span> <a href="login">立即登录》</a>
				</p>
			</div>
			<div>
				<img class="register_img" src="img/dz/img_register/tipsregist.png" />
			</div>
		</div>
	</div>
</body>
</html>